<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }

      li {
        list-style-type: none;
      }

      a {
        text-decoration: none;
        font-size: 14px;
      }

      .nav {
        margin: 100px;
      }

      .nav > li {
        position: relative;
        float: left;
        width: 80px;
        height: 41px;
        text-align: center;
      }

      .nav li a {
        display: block;
        width: 100%;
        height: 100%;
        line-height: 41px;
        color: #333;
      }

      .nav > li > a:hover {
        background-color: #eee;
      }

      .nav ul {
        display: none;
        position: absolute;
        top: 41px;
        left: 0;
        width: 100%;
        border-left: 1px solid #fecc5b;
        border-right: 1px solid #fecc5b;
      }

      .nav ul li {
        border-bottom: 1px solid #fecc5b;
      }

      .nav ul li a:hover {
        background-color: #fff5da;
      }
    </style>
    <script src="jquery.min.js"></script>
  </head>

  <body>
    <ul class="nav">
      <li>
        <a href="#">微博</a>
        <ul>
          <li>
            <a href="">私信</a>
          </li>
          <li>
            <a href="">评论</a>
          </li>
          <li>
            <a href="">@我</a>
          </li>
        </ul>
      </li>
      <li>
        <a href="#">微博</a>
        <ul>
          <li>
            <a href="">私信</a>
          </li>
          <li>
            <a href="">评论</a>
          </li>
          <li>
            <a href="">@我</a>
          </li>
        </ul>
      </li>
      <li>
        <a href="#">微博</a>
        <ul>
          <li>
            <a href="">私信</a>
          </li>
          <li>
            <a href="">评论</a>
          </li>
          <li>
            <a href="">@我</a>
          </li>
        </ul>
      </li>
      <li>
        <a href="#">微博</a>
        <ul>
          <li>
            <a href="">私信</a>
          </li>
          <li>
            <a href="">评论</a>
          </li>
          <li>
            <a href="">@我</a>
          </li>
        </ul>
      </li>
    </ul>
    <script>
      $(function () {
        // function cb() {
        //   $(this).siblings('ul').toggle()
        // }
        // $('.nav a').on({ mouseenter: cb, mouseleave: cb })
        // // 如果只绑定了一个参数（函数），那么表示鼠标进入和离开时都用这个回调函数
        // 这个 hover 是 jquery 提供的一个便捷函数，其实并不是一个标准的事件
        // 其实 hover 是 mouseenter 和 mouseleave 的组合
        // $('.nav a').hover(function () {
        //   $(this).siblings('ul').toggle() // 隐藏就显示，显示就隐藏
        // })
        // :hover
        // $('.nav a').hover(
        //   function () {
        //     // 第一个实参，是个函数，表示鼠标进入时的回调函数
        //     $(this).siblings('ul').show()
        //   },
        //   function () {
        //     // 第二个实参，是个函数，表示鼠标离开时的回调函数
        //     $(this).siblings('ul').hide()
        //   }
        // )
        // $('.nav a').on('mouseenter', function () {
        //   // this // ? ==> a
        //   $(this).siblings('ul').show()
        // })
        // $('.nav a').on('mouseleave', function () {
        //   // this // ? ==> a
        //   $(this).siblings('ul').hide()
        // })
        //    $(".nav>li").mouseenter(function(){
        //        this ==> li
        //        $(this).children("ul").show()
        //    })
        //    $(".nav>li").mouseleave(function(){
        //        $(this).children("ul").hide()
        //    })
      })
    </script>
  </body>
</html>
